<template>
  <div class="video-description">
    <div 
      class="description-content" 
      :class="{ 'expanded': isExpanded }"
      v-html="formattedDescription"
    ></div>
    <div v-if="shouldShowExpandButton" class="description-actions">
      <button 
        class="expand-btn" 
        :aria-expanded="isExpanded"
        @click="toggleExpanded"
      >
        {{ isExpanded ? '收起' : '展开' }}
        <span class="expand-icon" :class="{ 'rotated': isExpanded }"></span>
      </button>
    </div>
    <div v-if="metaInfo && Object.keys(metaInfo).length > 0" class="description-meta">
      <div v-for="(value, key) in metaInfo" :key="key" class="meta-item">
        <span class="meta-label">{{ key }}：</span>
        <span class="meta-value">{{ formatMetaValue(key, value) }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VideoDescription',
  props: {
    description: {
      type: String,
      default: '',
    },
    maxLength: {
      type: Number,
      default: 150,
    },
    metaInfo: {
      type: Object,
      default: null,
    },
    defaultExpanded: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isExpanded: this.defaultExpanded,
    }
  },
  computed: {
    shouldShowExpandButton() {
      return this.description.length > this.maxLength
    },
    formattedDescription() {
      if (!this.description) return ''
      
      // 处理描述文本的格式化
      let formatted = this.description
      
      // 如果未展开且长度超过限制，则截断文本
      if (!this.isExpanded && formatted.length > this.maxLength) {
        formatted = formatted.substring(0, this.maxLength) + '...'
      }
      
      // 转换Markdown风格的标题为HTML
      formatted = formatted.replace(/#{1,6}\s+([^\n]+)/g, '<h3>$1</h3>')
      
      // 转换换行符为<br>
      formatted = formatted.replace(/\n/g, '<br>')
      
      // 转换连续空格为非断行空格
      formatted = formatted.replace(/ {2,}/g, ' &nbsp;')
      
      // 转换#标签
      formatted = formatted.replace(/(#[\u4e00-\u9fa5\w]+)/g, '<span class="tag">$1</span>')
      
      return formatted
    },
  },
  methods: {
    toggleExpanded() {
      this.isExpanded = !this.isExpanded
      this.$emit('expanded-changed', this.isExpanded)
    },
    formatMetaValue(key, value) {
      // 格式化不同类型的元数据
      if (key === '播放量' || key === '点赞数' || key === '硬币数' || key === '收藏数' || key === '评论数') {
        return this.formatNumber(value)
      }
      return value
    },
    formatNumber(num) {
      if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
      }
      return num.toString()
    },
  },
}
</script>

<style scoped>
.video-description {
  padding: 15px 0;
}

.description-content {
  color: #333;
  line-height: 1.8;
  font-size: 14px;
  word-break: break-word;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.description-content.expanded {
  overflow: visible;
}

.description-content h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 15px 0 8px;
  color: #222;
}

.description-content .tag {
  color: #00a1d6;
  cursor: pointer;
  margin-right: 8px;
}

.description-content .tag:hover {
  text-decoration: underline;
}

.description-actions {
  margin-top: 10px;
}

.expand-btn {
  background: none;
  border: none;
  color: #00a1d6;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 0;
  transition: color 0.3s ease;
}

.expand-btn:hover {
  color: #0086c3;
}

.expand-icon {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform 0.3s ease;
}

.expand-icon.rotated {
  transform: rotate(180deg);
}

.description-meta {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.meta-item {
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.meta-label {
  font-weight: 600;
  margin-right: 5px;
}

.meta-value {
  color: #999;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .video-description {
    padding: 12px 0;
  }
  
  .description-content {
    font-size: 14px;
    line-height: 1.7;
  }
  
  .description-content h3 {
    font-size: 15px;
    margin: 12px 0 6px;
  }
  
  .meta-item {
    font-size: 13px;
    margin-bottom: 6px;
  }
}

@media (max-width: 480px) {
  .meta-item {
    font-size: 12px;
  }
  
  .expand-btn {
    font-size: 13px;
  }
}
</style>